<!--
 * @Descripttion: 详情弹框(查看、编辑、删除)
 * @version: v1.0.0
 * @Author: wang pingqi
 * @Date: 2021-04-19 15:47:59
 * @LastEditors: wang pingqi
 * @LastEditTime: 2022-07-18 16:09:52
-->
<template>
  <el-form
    ref="form4"
    :model="form"
    label-width="120px"
    label-position="right"
    class="form-wrapper"
    :disabled="status === 'r'"
  >
    <el-form-item
      label="该房型是否为无烟房"
      prop="nonSmoking"
      label-width="280px"
      verify
    >
      <el-radio-group v-model="form.nonSmoking">
        <el-radio :label="1">是</el-radio>
        <el-radio :label="0">否</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item
      label="是否允许举办派对和活动"
      prop="allowActicity"
      label-width="280px"
      verify
    >
      <el-radio-group v-model="form.allowActicity">
        <el-radio :label="1">是</el-radio>
        <el-radio :label="0">否</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item
      label="是否允许携带宠物"
      prop="allowPet"
      label-width="280px"
      verify
    >
      <el-radio-group v-model="form.allowPet">
        <el-radio :label="1">是</el-radio>
        <el-radio :label="0">否</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item
      label="是否允许携带儿童(2-12岁)入住"
      prop="allowChild"
      label-width="280px"
      verify
    >
      <el-radio-group v-model="form.allowChild">
        <el-radio :label="1">是</el-radio>
        <el-radio :label="0">否</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item
      label="是否允许加床"
      prop="allowExtraBed"
      label-width="280px"
      verify
    >
      <el-radio-group v-model="form.allowExtraBed">
        <el-radio :label="1">是</el-radio>
        <el-radio :label="0">否</el-radio>
      </el-radio-group>
    </el-form-item>

    <template v-if="form.allowExtraBed == 1">
      <el-form-item
        label="允许加床数量"
        prop="extraBedNum"
        label-width="280px"
        verify
      >
        <el-select
          v-model="form.extraBedNum"
          placeholder="请选择"
          @change="onExtraBedNumChange"
          clearable
        >
          <el-option
            v-for="its in [1, 2, 3, 4, 5]"
            :key="its"
            :label="its"
            :value="its"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <div v-for="(item, index) in form.extraBedData" :key="index">
        <div class="area-wrapper">
          <h3>加床{{ index + 1 }}</h3>

          <el-form-item
            label="加床类型"
            :prop="`extraBedData.${index}.extraBedType`"
            verify
          >
            <el-select
              v-model="item.extraBedType"
              placeholder="请选择"
              style="width: 100%"
              clearable
            >
              <el-option
                v-for="item in dict.extra_bed_type"
                :key="item.dataValue"
                :label="item.dataName"
                :value="item.dataValue"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item
            label="是否免费"
            :prop="`extraBedData.${index}.free`"
            verify
          >
            <el-select
              v-model="item.free"
              placeholder="请选择"
              style="width: 100%"
              clearable
            >
              <el-option
                v-for="item in [
                  { dataName: '是', dataValue: 1 },
                  { dataName: '否', dataValue: 0 },
                ]"
                :key="item.dataValue"
                :label="item.dataName"
                :value="item.dataValue"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item
            v-if="item.free == 0"
            label="加床价格"
            :prop="`extraBedData.${index}.__extraBedFee`"
            :verify="{ type: 'int',  gt: 0 , lte: 999 }"
          >
            <!-- <el-input placeholder="请输入加床价格" v-model="item.extraBedFee">
              <template slot="append">/元</template>
            </el-input> -->
            <PriceInput
              v-model="item.extraBedFee"
              :yuan.sync="item.__extraBedFee"
              placeholder="请输入加床价格"
            />
          </el-form-item>
        </div>
      </div>
    </template>

    <el-form-item label="注意事项" prop="note" :verify="{ minLength : 20,maxLength: 500}">
      <el-input
        v-model="form.note"
        type="textarea"
        placeholder="请输入注意事项，示例：为了您的安全，房间内请勿吸烟及使用大功率电器及厨具等"
        :autosize="{ minRows: 3 }"
      >
      </el-input>
      <div class="limit">
        20 - 500
      </div>
    </el-form-item>
  </el-form>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  props: {
    form: {
      type: Object,
      required: true,
      default() {
        return {};
      },
    },
    status: {
      type: String,
      required: true,
    },
  },
  computed: {
    ...mapGetters(["dict"]),
  },
  data() {
    return {};
  },
  watch: {
    // 是否允许加床选择否,清空加床信息、加床数量
    "form.allowExtraBed": {
      handler(nv, ov) {
        if (nv == 0) {
          this.$set(this.form, "extraBedData", []);
          this.$set(this.form, "extraBedNum", null);
        }
        if (nv == 1) {
          if (
            !this.form.extraBedData ||
            (this.form.extraBedData.constructor === Array &&
              this.form.extraBedData.length == 0)
          ) {
            this.$set(this.form, "extraBedNum", 1);
            this.onExtraBedNumChange(1);
          }
        }
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    onExtraBedNumChange(nv) {
      let temp = [];
      for (let i = 0; i < nv; i++) {
        temp.push({
          extraBedType: null,
          free: null,
          extraBedFee: null,
        });
      }
      this.$set(this.form, "extraBedData", temp);
    },
  },
};
</script>

<style lang="scss" scoped>
.area-wrapper {
  padding: 0 18px 18px 128px;
  margin-bottom: 28px;
  border: 1px solid #f0f0f0;
  box-shadow: 2px 2px 2px 2px #fcfcfc;
  border-radius: 4px;
  h3 {
    padding-left: 48px;
    font-size: 15px;
  }
}

.limit{
  display: flex;
  justify-content: flex-end;
  margin: -5px 10px 0 0;
  font-size: 12px;
  color: #bababa;
}
</style>
